<template>
	<view class="box">
		<navBar title='博客' :isSlot="false" :isNav="false"></navBar>

		<view class="contentBox">
			<image :src="blog.cover" mode="aspectFill"></image>
			<view class="content">
				<text>{{blog.title}}</text>
				<view class="myContent">
					<image :src="blog.userAvatar" mode="aspectFill"></image>
					<text>{{blog.userName}}</text>
					<text class="read">{{blog.read_count}}阅读</text>
					<view class="contentIcon" @click="initFollowUser" v-if="LikeUser">
						<u-icon name="list" color="#333" size="20"></u-icon>
						<text>已关注</text>
					</view>
					<view class="contentIcon contentIconBox" @click="initFollowUser" v-else>
						<u-icon name="list" color="#333" size="20"></u-icon>
						<text>关注</text>
					</view>
				</view>
			</view>
			<view class="Mask"></view>
		</view>
		<view class="content">
			<rich-text :nodes="blog.content"></rich-text>
			<view class="time">
				{{$u.timeFormat(blog.createdAt, 'yyyy/mm/dd/ hh:MM:ss')}} · 著作权归作者所有
			</view>
		</view>
		<view class="footBox">
			<view class="footBoxContent">
				<view class="zan">
					<u-icon name="thumb-up-fill" size="25px" color="#2b63fa"></u-icon>
					<text>赞成</text>
					<text>{{blog.like_count}}</text>
				</view>
				<view class="footBoxContentBox">
					<view class="iconBox">
						<u-icon name="heart" size="30px"></u-icon>
						<text>123</text>
					</view>
					<view class="iconBox">
						<u-icon name="star" size="30px"></u-icon>
						<text>123</text>
					</view>
					<view class="iconBox">
						<u-icon name="chat" size="30px" @click="allComment"></u-icon>
						<text>{{blog.comment_count}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-divider class="silid"></u-divider>
		<view class="comment">
			<text>评论 {{filtCommentTextList.length}}</text>
			<view class="commentContent">
				<image :src="userInfo.avatar" class="user"></image>
				<u--input placeholder="写下你的评论..." border="surround" @focus="allComment"></u--input>
			</view>
			<!-- 评论区域 -->
			<view class="commentBox" v-for="item in filtCommentTextList" :key="item.updatedAt">
				<image :src="item.userAvatar" class="commentBoxLeft"></image>
				<view class="commentBoxRight">
					<text>{{item.userName}}</text>
					<text @click="commentReply(item)">{{item.content}}</text>
					<view class="commentBoxRightFoot">
						<view class="time">
							{{$u.timeFormat(blog.createdAt, 'mm-dd')}}
						</view>
						<view class="commentBoxRightFootIcon">
							<u-icon name="chat" size="20px" color="#999" @click="commentReply(item)"></u-icon>
							<text>{{item.filtArr?item.filtArr.length:""}}</text>
							<u-icon name="thumb-up-fill" size="20px" color="#999" @click="like(item)"
								v-if="!item.likeCount"></u-icon>
							<u-icon name="thumb-up-fill" size="20px" color="#2b63fa" @click="like(item)" v-else>
							</u-icon>
							<text>{{item.likeCount}}</text>
						</view>
					</view>
					<!-- 回复评论区域 -->
					<view class="commentBox" v-if="item.filtArr" v-for="i in item.filtArr" :key="i.updatedAt">
						<image :src="i.userAvatar" class="commentBoxLeft"></image>
						<view class="commentBoxRight">
							<text>{{i.userName}}</text>
							<text>{{i.content}}</text>
							<view class="commentBoxRightFoot">
								<view class="time">
									{{$u.timeFormat(i.createdAt, 'mm-dd')}}
								</view>
								<view class="commentBoxRightFootIcon">
									<u-icon name="chat" size="20px" color="#999"></u-icon>
									<text>{{i.filtArr?i.filtArr.length:""}}</text>
									<u-icon name="thumb-up-fill" size="20px" color="#999" @click="like(i)"
										v-if="!i.likeCount"></u-icon>
									<u-icon name="thumb-up-fill" size="20px" color="#2b63fa" @click="like(i)" v-else>
									</u-icon>
									<text>{{i.likeCount}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="filtCommentTextList == 0" mode="comment">
			</u-empty>
		</view>
		<view class="bottom"></view>
		<u-popup :safeAreaInsetBottom="true" :safeAreaInsetTop="true" :show="show" :round="20" mode="bottom"
			@close="close" closeable closeIconPos="top-left" customStyle="height:50vh">
			<text class="textTitle">{{textTitle}}</text>
			<view class="popupHeade">
				<view class="myContent" v-if="textTitle == '全部评论'">
					<image :src="blog.userAvatar" mode="aspectFill" class="myContentImg"></image>
					<text>{{blog.userName}}</text>
					<text class="read">{{blog.read_count}} 阅读</text>
				</view>
				<!-- 头部被回复评论 -->
				<view class="commentBox" v-else>
					<image :src="commentItem.userAvatar" class="commentBoxLeft"></image>
					<view class="commentBoxRight">
						<text>{{commentItem.userName}}</text>
						<text>{{commentItem.content}}</text>
						<view class="commentBoxRightFoot">
							<view class="time">
								{{$u.timeFormat(blog.createdAt, 'mm-dd')}}
							</view>
							<view class="commentBoxRightFootIcon">
								<u-icon name="chat" size="20px" color="#999"></u-icon>
								<u-icon name="thumb-up-fill" size="20px" color="#999" @click="like(commentItem)"
									v-if="!commentItem.likeCount"></u-icon>
								<u-icon name="thumb-up-fill" size="20px" color="#2b63fa" @click="like(commentItem)"
									v-else>
								</u-icon>
								<text>{{commentItem.likeCount}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 回复评论 -->
				<u-divider></u-divider>
				<text>评论 {{commentItem.filtArr?commentItem.filtArr.length:filtCommentTextList.length}}</text>
				<view class="pinlunBox">
					<!-- 评论区域 -->
					<view class="commentBox" v-for="item in filtCommentTextList" :key="item.updatedAt"
						v-if="textTitle == '全部评论'">
						<image :src="item.userAvatar" class="commentBoxLeft"></image>
						<view class="commentBoxRight">
							<text>{{item.userName}}</text>
							<text>{{item.content}}</text>
							<view class="commentBoxRightFoot">
								<view class="time">
									{{$u.timeFormat(blog.createdAt, 'mm-dd')}}
								</view>
								<view class="commentBoxRightFootIcon">
									<u-icon name="chat" size="20px" color="#999" @click="commentReply(item)"></u-icon>
									<text>{{item.filtArr?item.filtArr.length:""}}</text>
									<u-icon name="thumb-up-fill" size="20px" color="#999" @click="like(item)"
										v-if="!item.likeCount"></u-icon>
									<u-icon name="thumb-up-fill" size="20px" color="#2b63fa" @click="like(item)" v-else>
									</u-icon>
									<text>{{item.likeCount}}</text>
								</view>
							</view>
							<!-- 回复评论区域 -->
							<view class="commentBox" v-if="item.filtArr" v-for="i in item.filtArr" :key="i.updatedAt">
								<image :src="i.userAvatar" class="commentBoxLeft"></image>
								<view class="commentBoxRight">
									<text>{{i.userName}}</text>
									<text>{{i.content}}</text>
									<view class="commentBoxRightFoot">
										<view class="time">
											{{$u.timeFormat(i.createdAt, 'mm-dd')}}
										</view>
										<view class="commentBoxRightFootIcon">
											<u-icon name="chat" size="20px" color="#999"></u-icon>
											<text>{{i.filtArr?i.filtArr.length:""}}</text>
											<u-icon name="thumb-up-fill" size="20px" color="#999" @click="like(i)"
												v-if="!i.likeCount"></u-icon>
											<u-icon name="thumb-up-fill" size="20px" color="#2b63fa" @click="like(i)"
												v-else>
											</u-icon>
											<text>{{i.likeCount}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 回复评论的模块 -->
					<view class="commentBox" v-for="item in commentItem.filtArr" :key="item.index"
						v-if="textTitle == '回复评论'">
						<image :src="item.userAvatar" class="commentBoxLeft"></image>
						<view class="commentBoxRight">
							<text>{{item.userName}}</text>
							<text>{{item.content}}</text>
							<view class="commentBoxRightFoot">
								<view class="time">
									{{$u.timeFormat(blog.createdAt, 'mm-dd')}}
								</view>
								<view class="commentBoxRightFootIcon">
									<u-icon name="chat" size="20px" color="#999" @click="commentReply(item)"></u-icon>
									<text>{{item.filtArr?item.filtArr.length:""}}</text>
									<u-icon name="thumb-up-fill" size="20px" color="#999" @click="like(item)"
										v-if="!item.likeCount"></u-icon>
									<u-icon name="thumb-up-fill" size="20px" color="#2b63fa" @click="like(item)" v-else>
									</u-icon>
									<text>{{item.likeCount}}</text>
								</view>
							</view>
							<!-- 回复评论区域 -->
							<!-- <view class="commentBox" v-if="item.filtArr" v-for="i in item.filtArr" :key="i.index">
								<image :src="i.userAvatar" class="commentBoxLeft"></image>
								<view class="commentBoxRight">
									<text>{{i.userName}}</text>
									<text>{{i.content}}</text>
									<view class="commentBoxRightFoot">
										<view class="time">
											{{$u.timeFormat(i.createdAt, 'mm-dd')}}
										</view>
										<view class="commentBoxRightFootIcon">
											<u-icon name="chat" size="20px" color="#999"></u-icon>
											<text>{{i.filtArr?i.filtArr.length:""}}</text>
											<u-icon name="thumb-up-fill" size="20px" color="#999" @click="like(i)"
												v-if="!i.likeCount"></u-icon>
											<u-icon name="thumb-up-fill" size="20px" color="#2b63fa" @click="like(i)"
												v-else>
											</u-icon>
											<text>{{i.likeCount}}</text>
										</view>
									</view>
								</view>
							</view> -->
						</view>
					</view>
				</view>

				<view class="setComment">
					<view class="setCommentBox">
						<u--textarea confirmType="done" v-model="commentText" border="none" placeholder="网络并非非法之地"
							autoHeight></u--textarea>
						<u-button type="default" text="发布" class="setCommentBtn" @click="initcComment"></u-button>
					</view>
				</view>
				<view class="popupFoot"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		getSearch,
		comment,
		getComment,
		likeComment,
		followUser,
		getLikeUser
	} from "@/config/api.js"

	export default {
		data() {
			return {
				value3: "",
				blog: [],
				show: false,
				commentText: "",
				commentTextList: [],
				textTitle: "",
				commentItem: "",
				replyComment: [],
				filtCommentTextList: [],
				LikeUser: false
			}
		},
		methods: {

		},
		onLoad(e) {
			this.initBlog(e.id)
		},
		methods: {
			close() {
				this.show = false
			},
			async initGetLikeUser() {
				const res = await getLikeUser(this.userInfo.token)
				const arr = res.data.data.rows
				this.LikeUser = arr.findIndex(ele => ele.beFollowUserId == this.blog.userId) == -1 ? false : true
			},
			async initBlog(id) {
				const res = await getSearch((+id), this.userInfo.token)
				this.blog = res.data.data
				this.blog.createdAt = new Date(this.blog.createdAt).getTime()
				this.initGetComment(this.blog.id)
				this.initGetLikeUser()
			},
			// 新建评论
			async initcComment() {
				if (this.textTitle == "全部评论") {
					await comment({
						blogId: this.blog.id,
						projectId: 162,
						content: this.commentText
					}, this.userInfo.token)
				} else {
					const res = await comment({
						blogId: this.commentItem.blogId,
						projectId: 162,
						parentCommentId: this.commentItem.id,
						content: this.commentText
					}, this.userInfo.token)
				}
				this.separate()
				this.initGetComment(this.blog.id)
			},
			// 获取评论
			async initGetComment(id) {
				const res = await getComment(id)
				this.commentTextList = res.data.data.rows
				this.commentTextList.forEach(ele => {
					ele.createdAt = new Date(ele.createdAt).getTime()
				})
				this.separate()
			},
			async like(data) {
				const res = await likeComment({
					commentId: data.id,
					blogId: data.blogId,
					projectId: 162
				}, this.userInfo.token)
				const index = this.commentTextList.findIndex(ele => ele.id == data.id)
				if (res.data.msg == "取消点赞成功") {
					this.commentTextList[index].likeCount--
				} else {
					this.commentTextList[index].likeCount++
				}
			},
			async commentReply(data) {
				// const res = await comment({
				// 	blogId: data.blogId,
				// 	projectId: 162,
				// 	parentCommentId: data.id,
				// 	content: this.commentText
				// }, this.userInfo.token)
				this.textTitle = "回复评论"
				this.show = true
				this.commentItem = data
				// console.log(res);
			},
			allComment() {
				this.textTitle = "全部评论"
				this.show = true
			},
			// 将回复评论与评论分离
			separate() {
				// const arr = this.commentTextList.filter(ele => ele.beRepliedUserId != null)
				// arr.forEach((ele, i) => {
				// 	const index = this.filtCommentTextList.findIndex(item => item.id == ele.parentCommentId)
				// 	if (index != -1) {
				// 		console.log();
				// 		if (this.filtCommentTextList[index].filtArr){
				// 			this.filtCommentTextList[index].filtArr.push(ele)
				// 			console.log(1);
				// 		}else{
				// 			this.filtCommentTextList[index].filtArr = [ele]
				// 		}
				// 	}
				// })

				// for (let i = 0; i <= this.commentTextList.length; i++) {
				// 	for (let j = i + 1; j < this.commentTextList.length; j++) {
				// 		if (this.commentTextList[i].parentCommentId == this.commentTextList[j].id) {
				// 			if (this.commentTextList[j].filtArr) {
				// 				this.commentTextList[j].filtArr.push(this.commentTextList[i])
				// 			} else {
				// 				this.commentTextList[j].filtArr = [this.commentTextList[i]]
				// 			}
				// 		}
				// 	}
				// }

				// 将回复评论放到对应的父评论下
				this.commentTextList.forEach(ele => {
					ele.isShow = false
					const index = this.commentTextList.findIndex(item => item.id == ele.parentCommentId);
					if (index != -1) {
						if (this.commentTextList[index].filtArr) {
							this.commentTextList[index].filtArr.push(ele)
						} else {
							this.commentTextList[index].filtArr = [ele]
						}
					}
				})
				this.filtCommentTextList = this.commentTextList.filter(ele => ele.beRepliedUserId == null)
			},
			async initFollowUser() {
				const res = await followUser({
					id: this.blog.userId,
					projectId: 162
				}, this.userInfo.token)
				this.initGetLikeUser()
			}
		},
		computed: {
			...mapState(['userInfo'])
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 3vw;

		.content {
			width: 100%;
			margin-top: 5vw;

			p {
				text-align: center;

				img {
					width: 50%;
					margin: 0 auto;
				}
			}

			.time {
				margin-top: 2vh;
				color: #999;
			}
		}

		.contentBox {
			position: relative;
			width: 100%;
			height: 80vw;

			>image {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				border-radius: 10px;
				box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
			}

			.content {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 30%;
				padding: 3vw;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				z-index: 1;

				text {
					color: #fff;
					font-size: 25px;
					font-weight: bold;
				}

				.myContent {
					width: 100%;
					height: 40%;
					display: flex;
					align-items: center;

					>image {
						width: 10vw;
						height: 10vw;
						border-radius: 50%;
						margin-right: 2vw;
					}

					text {
						font-weight: 400;
						font-size: 18px
					}

					.read {
						margin-left: 5vw;
					}
				}
			}

			.Mask {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 30%;
				background-color: black;
				opacity: 0.5;
				filter: blur(5px);
				z-index: 0;
			}

		}

		.silid {
			margin-top: 0.5vh;
		}

		.comment {
			margin-top: 2.5vh;
			width: 100%;
			// background-color: #fffef9;
			padding: 3vw;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			border-radius: 10px;
			// filter: blur(5px);

			.commentContent {
				margin: 5vw 0;
				display: flex;
				align-items: center;

				.user {
					width: 12vw;
					height: 12vw;
					border-radius: 50%;
					margin-right: 2vw;
				}
			}

			.commentBox {
				width: 100%;
				padding: 3vw;
				box-sizing: border-box;
				display: flex;

				.commentBoxLeft {
					width: 10vw;
					height: 10vw;
					border-radius: 50%;
				}

				.commentBoxRight {
					display: flex;
					padding-left: 5vw;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;

					.time {
						color: #999;
					}

					>text {
						margin-bottom: 5vw;
					}

					.commentBoxRightFoot {
						display: flex;
						justify-content: space-between;

						>text {
							color: #999;
						}

						.commentBoxRightFootIcon {
							width: 20vw;
							display: flex;
							justify-content: space-between;

							text {
								color: #999;
							}
						}
					}
				}
			}
		}

		.bottom {
			width: 100%;
			height: 10vh;
		}

		.footBox {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 10vh;
			padding: 3vw;
			box-sizing: border-box;
			border-top: 2px solid #fbfbfb;
			background-color: #fff;
			z-index: 999;

			.footBoxContent {
				width: 100%;
				height: 70%;
				display: flex;
				justify-content: space-between;

				.zan {
					width: 40vw;
					height: 100%;
					background-color: #ecf2fe;
					border-radius: 40px;
					display: flex;
					align-items: center;
					justify-content: center;


					>text {
						color: #2b63fa;
						padding-right: 4vw;
						border-right: 2px solid #dee8f5;

						&:nth-child(3) {
							padding-left: 4vw;
							border: none;
						}
					}
				}

				.footBoxContentBox {
					width: 45vw;
					height: 100%;
					border-radius: 40px;
					display: flex;
					align-items: center;
					justify-content: space-evenly;

					.iconBox {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}
	}

	.textTitle {
		margin: 0 auto;
		margin-top: 3vw;
	}

	.popupHeade {
		width: 100%;
		height: 80vh;
		margin-top: 5vh;
		padding: 3vw;
		box-sizing: border-box;
		overflow: auto;

		.commentBox {
			width: 100%;
			padding: 3vw;
			box-sizing: border-box;
			display: flex;

			.commentBoxLeft {
				width: 10vw;
				height: 10vw;
				border-radius: 50%;
			}

			.commentBoxRight {
				display: flex;
				padding-left: 5vw;
				flex: 1;
				flex-direction: column;
				justify-content: space-between;

				.time {
					color: #999;
				}

				>text {
					margin-bottom: 5vw;
				}

				.commentBoxRightFoot {
					display: flex;
					justify-content: space-between;

					>text {
						color: #999;
					}

					.commentBoxRightFootIcon {
						width: 20vw;
						display: flex;
						justify-content: space-between;

						text {
							color: #999;
						}
					}
				}
			}
		}

		.myContent {
			width: 50%;
			height: 5vh;
			display: flex;
			align-items: center;
			justify-content: space-between;

			>image {
				width: 10vw;
				height: 10vw;
				border-radius: 50%;
				margin-right: 2vw;
			}
		}

		.pinlunBox {
			width: 100%;
			overflow: auto;

			.commentBox {
				width: 100%;
				padding: 3vw;
				box-sizing: border-box;
				display: flex;

				.commentBoxLeft {
					width: 10vw;
					height: 10vw;
					border-radius: 50%;
				}

				.commentBoxRight {
					display: flex;
					padding-left: 5vw;
					flex: 1;
					flex-direction: column;
					justify-content: space-between;

					.time {
						color: #999;
					}

					>text {
						margin-bottom: 5vw;
					}

					.commentBoxRightFoot {
						display: flex;
						justify-content: space-between;

						>text {
							color: #999;
						}

						.commentBoxRightFootIcon {
							width: 20vw;
							display: flex;
							justify-content: space-between;

							text {
								color: #999;
							}
						}
					}
				}
			}

		}

		.popupFoot {
			width: 100%;
			height: 10vh;
		}

		.setComment {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 10vh;
			background-color: #fff;
			box-sizing: border-box;
			border-top: 1px solid #999;

			.setCommentBox {
				display: flex;

				.setCommentBtn {
					color: #2b63fa;
					width: 20vw;
				}
			}

		}
	}

	::v-deep .u-textarea {
		width: 70vw;
	}

	.contentIcon {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		margin-left: 25vw;
		width: 20vw;
		height: 8vw;
		background-color: #999;
		border-radius: 5px;

	}

	::v-deep .uicon-empty-comment {
		span {
			display: none;
		}
	}

	.contentIconBox{
		background-color: #2b63fa;
	}
	// .myContentImg{
	// 	width: 10vw;
	// 	height: 10vw;
	// 	border-radius: 50%;
	// 	margin-right: 2vw;
	// }
	// ::v-deep .u-transition{
	// 	height: 50vh;
	// }
</style>
